<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理页面</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function getPromise(url, type) {
            return new Promise(function (resolve, reject) {
                $.ajax({
                    url,
                    type,
                    success: function (data) {
                        resolve(data);
                    }
                });
            });
        }
        let classArr = null;
        $(function () {
            let classPromise = getPromise('/class', 'get');
            let studentPromise = getPromise('/student', 'get');

            async function getStu() {
                classArr = (await classPromise).data;
                let studentArr = (await studentPromise).data;
                // console.log(classArr,studentArr);
                render(studentArr);
                //渲染班级的下拉列表
                let optionContent='';
                classArr.forEach(val=>{
                    optionContent+=`<option value="${val.id}">${val.name}</option>`
                });
                $('#classId').html(optionContent);
            }
            getStu();
            //父元素tbody处理所有点击事件
            $('tbody').on('click', function (event) {
                if (event.target.innerText == '删除') {
                    // console.log('删除');
                    let id = event.target.parentElement.parentElement.firstElementChild.innerText;
                    $.ajax({
                        url: '/student/' + id,
                        type: 'delete',
                        success: function (data) {
                            alert(data.message);
                            render(data.data);
                        }
                    })
                } else if (event.target.innerText == '修改') {
                    // console.log('修改');
                    let tr = event.target.parentElement.parentElement;
                    tr.children[1].innerHTML = `<input type="text" value="${tr.children[1].innerText}"/>`;
                    tr.children[2].innerHTML = `<input type="text" value="${tr.children[2].innerText}"/>`;
                    if (tr.children[3].innerText == '男') {
                        tr.children[3].innerHTML = `<input type="radio" checked="" value="男" name="gender"/>男<input type="radio" value="女" name="gender"/>女`;
                    } else {
                        tr.children[3].innerHTML = `<input type="radio" value="男" name="gender"/>男<input type="radio"  checked="" value="女" name="gender"/>女`;
                    }
                    //遍历班级数据生成option选项
                    let optionContent = '';
                    classArr.forEach(val => {
                        if (val.id == tr.children[4].innerText) {
                            optionContent += `<option selected value="${val.id}">${val.name}</option>`;
                        } else {
                            optionContent += `<option value="${val.id}">${val.name}</option>`;
                        }
                    })
                    tr.children[5].innerHTML = `<select>
                                                    ${optionContent}
                                            </select>`
                    tr.children[6].innerHTML = `<input type="button" value="确定"/>`;
                    tr.children[5].firstElementChild.onchange = function (event) {
                        // console.log('触发');
                        tr.children[4].innerText = event.target.value;
                    }
                } else if (event.target.value == '确定') {
                    let tr = event.target.parentElement.parentElement;
                    //编号
                    let id = tr.children[0].innerText;
                    //名称
                    let sname = tr.children[1].firstElementChild.value;
                    //年龄
                    let sage = tr.children[2].firstElementChild.value;
                    //性别
                    let sgender = '';
                    if (tr.children[3].children[0].checked) {
                        sgender = tr.children[3].children[0].value;
                    } else {
                        sgender = tr.children[3].children[1].value;
                    }
                    //班级编号
                    let classId = tr.children[4].innerText;
                    // console.log(id,sname,sage,sgender,classId);
                    $.ajax({
                        url: `/student/${id}/${sname}/${sage}/${sgender}/${classId}`,
                        type: 'put',
                        success: function (data) {
                            alert(data.message);
                            render(data.data);
                        }
                    })
                }
            })
            

            //新增提交事件
            $('#addForm').on('submit',function(event){
                //阻止默认行为
                event.preventDefault();
                //名称
                let sname=$('#sname').val();
                //年龄
                let sage=$('#sage').val();
                //性别
                let sgender='';
                
                if($('[name="sgender"]')[0].checked){
                    sgender=$('[name="sgender"]')[0].value;
                }else{
                    sgender=$('[name="sgender"]')[1].value;
                }
                //班级编号
                let classId=$('#classId').val();
                $.ajax({
                    url:`/student/${sname}/${sage}/${sgender}/${classId}`,
                    type:'post',
                    success:function(data){
                        alert(data.message);
                        render(data.data);
                        document.querySelector('#addForm').reset();
                    }
                })
            });
        })
        function render(data) {
            let content = '';
            data.forEach(val => {
                //根据班级编号获取班级名称
                let cname = classArr.filter(v => v.id == val.classId)[0].name;
                content += `<tr>
                            <td>${val.id}</td>
                            <td>${val.name}</td>
                            <td>${val.age}</td>
                            <td>${val.gender}</td>
                            <td>${val.classId}</td>
                            <td>${cname}</td>
                            <td>
                                <span>删除</span>
                                <span>修改</span>
                            </td>
                        </tr>`;
            });
            $('tbody').html(content);
        }
    </script>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级编号</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>



    <form action="" id="addForm">
        <input type="text" id="sname" placeholder="请输入姓名"/>
        <input type="number" id="sage" placeholder="请输入年龄"/>
        <input type="radio" name="sgender" value="男" checked/>男
        <input type="radio" name="sgender" value="女"/>女
        <select id="classId"></select>
        <input type="submit">
    </form>
</body>

</html>